<ui:composition template="index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<ui:param name="user" value="#{userBean.findById(userBean.userId)}" />
	<f:metadata>
		<f:viewParam name="user_id" value="#{userBean.userId}" />
	</f:metadata>

	<ui:param name="pageTitle" value="Perfil | ReviewIt" />
	<ui:param name="pageName" value="page-profile" />

	<ui:define name="css"></ui:define>

	<ui:define name="feature"></ui:define>

	<ui:define name="content">
		<div class="row">
			<div class="large-4 columns">
				<img src="data:image/jpg;base64,#{user.photo}" />
			</div>
			<div class="large-8 columns user-info">
				<p>
					<strong> <span title="Nome" class="icon-user"></span> <h:outputText
							value="#{user.firstName} #{user.lastName}" />
					</strong>
				</p>
				<p>
					<span title="Email" class="icon-envelope"></span>
					<h:outputText value="#{user.email}" />
				</p>
				<p>
					<span title="Site" class="icon-globe"></span> <a
						href="#{user.website}" target="_BLANK">#{user.website}</a>
				</p>
				<p>
					<span title="Localização" class="icon-map-marker"></span>
					<h:outputText value="#{user.location}" />
				</p>
				<p>
					<span title="Data de nascimento" class="icon-calendar"></span>
					<h:outputText value="#{user.birthdate}">
						<f:convertDateTime pattern="dd/MM/yy" />
					</h:outputText>
				</p>
				<p>
					<span title="Membro desde" class="icon-time"></span>
					<h:outputText value="#{user.creationDate}">
						<f:convertDateTime pattern="dd/MM/yy" />
					</h:outputText>
				</p>
				<p>
					<span title="Sobre" class="icon-quote-left"></span>
					<h:outputText value="#{user.about}" escape="false"/>
				</p>
			</div>
		</div>
		<div>
			<h3 class="title">
				<span class="icon-folder-open"></span> Documentos
			</h3>
	      	<div id="list-documents" class="docs">
		      	<p:dataGrid var="doc" value="#{documentBean.getDocumentsFromUser(user)}" columns="1" rows="10" paginator="true" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="10, 25, 50">
		      		<div class="doc">
						<div class="panel callout">
							<div class="doc-score icon-star"><span>#{doc.score}</span></div>
							<div class="doc-feedbacks icon-comment"><span>0</span></div>
						</div>
						<div class="doc-details">
							<a class="doc-title" href="document.xhtml?doc_id=#{doc.id}">#{doc.title}</a>
							<div class="doc-info text-right">
								<div class="doc-user icon-user"></div>
								<a href="user.xhtml?user_id=#{doc.owner.id}">
									#{doc.owner.firstName} #{doc.owner.lastName}
								</a>
								 | 
								<div class="doc-date icon-calendar"></div>
								<h:outputText value="#{doc.creationDate}">  
						  			<f:convertDateTime pattern="dd/MM/yy HH:mm"/>
								</h:outputText>
							</div>
							<div class="doc-tags">
								<ui:repeat var="tag" value="#{doc.tags}">
									<a href="documents.xhtml?tag=#{tag}" class="tiny button">#{tag}</a>
								</ui:repeat>
							</div>
						</div>
					</div>
					<hr/>
			    </p:dataGrid>
		    </div>
	   </div>
	</ui:define>
</ui:composition>